<?php
// 网站主目录，用于查看多媒体及文本文件或下载
$www = 'http://127.0.0.1';
// 授权访问目录
$root = 'E:';

// 初始化目录
if (!empty($_GET['dir'])) {
	$dir = $_GET['dir'] == 'undefined' ? $root . DIRECTORY_SEPARATOR : $_GET['dir'] . DIRECTORY_SEPARATOR;
	// 是否在授权目录下
	// if (strpos($dir, $root) == 0 && is_dir(iconv('UTF-8', 'gbk', $dir))) { 解决编码问题
	if (strpos($dir, $root) == 0 && is_dir($dir)) {
		// 遍历当前目录下的文件和文件夹并存入filepaths中以json格式返回
		$filepaths = ['paths' => [], 'files' => []];
		// foreach (scandir(iconv('UTF-8', 'gbk', $dir)) as $filepath) { 解决编码问题
		foreach (scandir($dir) as $filepath) {
			if ($filepath == '.' || $filepath == '..') continue;
			if (is_dir($dir . $filepath)) {
				// $filepaths['paths'][] = $dir . iconv('gbk', 'utf-8', $filepath); 解决编码问题
				$filepaths['paths'][] = $dir . $filepath;
			} else {
				// $filepaths['files'][] = $dir . iconv('gbk', 'utf-8', $filepath); 解决编码问题
				$filepaths['files'][] = $dir . $filepath;
			}
		}
		exit(json_encode($filepaths));
	}
}
?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>文件浏览器</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.10.2/css/all.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.css">
	<style>
	* { margin: 0; padding: 0; color: #666; font-family: "microsoft yahei"; }
	.header { background-color: #333; line-height: 60px; color: #FFF; font-size: 30px; text-indent: 2%; }
	.bar { padding: 0 2%; width: 96%; background-color: #EEE; border-bottom: 1px solid #DDD; overflow: hidden; zoom: 1; }
	.bar .up { float: left; line-height: 40px; font-size: 16px; cursor: pointer; }
	.bar .dir { float: left; margin-left: 20px; line-height: 40px; font-size: 16px; }
	.bar .view { float: right; line-height: 40px; }
	.bar .view a { padding-left: 10px; font-size: 16px; text-decoration: none; }
	#content  { padding: 2%; width: 96%; overflow: hidden; zoom: 1; }
	#content dl:hover { background-color: #F6F6F6; }
	.v dl { height: 40px; border-bottom: 1px dotted #CCC; cursor: pointer; }
	.v dl dt { float: left; margin-left: 10px; width: 40px; line-height: 40px; text-align: center; font-size: 30px; }
	.v dl dd { float: left; margin-left: 5px; line-height: 40px; text-align: center; font-size: 16px; }
	.h dl { float: left; margin: 0 5px 10px 5px; width: 120px; height: 100px; cursor: pointer; }
	.h dl dt { width: 120px; line-height: 60px; text-align: center; font-size: 60px; }
	.h dl dd { height: 40px; line-height: 20px; font-size: 14px; text-align: center; overflow: hidden; }
	#dplayer { display: none; width: 720px; height: 576px; }
	</style>
</head>
<body>
	<div class="header">文件浏览器</div>
	<div class="bar">
		<div class="up"><i class="fa fa-reply" aria-hidden="true"></i>&nbsp;&nbsp;上级目录</div>
		<div class="dir"></div>
		<div class="view">
			<a href="javascript:$('#content').attr('class', 'v');" class="fa fa-th-list" aria-hidden="true"></a>
			<a href="javascript:$('#content').attr('class', 'h');" class="fa fa-th-large" aria-hidden="true"></a>
		</div>
	</div>
	<div class="h" id="content"></div>
	<div id="dplayer"></div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script src="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.js"></script>
<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
<script>
const www = '<?php echo $www; ?>';
const root = '<?php echo str_replace("\\", "\\\\", $root); ?>';

function getDir(_dir) {
	// 路径显示，不显示根目录
	var path = _dir == undefined ? '\\' : _dir.replace(root, '') + '\\';
	$('.dir').empty().append(path);
	// 获取目录和文件
	$.getJSON('?dir=' + _dir, function(json) {
		var list = '', i;
		for (i in json.paths) {
			list += '<dl data-path="' + json.paths[i] + '"><dt class="fa fa-folder" aria-hidden="true"></dt><dd>' + json.paths[i].replace(root + path, '') + '</dd></dl>'; 
		}
		for (i in json.files) {
			list += '<dl data-file="' + json.files[i] + '"><dt class="fa fa-file" aria-hidden="true"></dt><dd>' + json.files[i].replace(root + path, '') + '</dd></dl>'; 
		}
		$('#content').empty().append(list);
	});
}

$(function() {
	getDir();

	// 上一级目录
	$('.up').on('click', function(){
		var dir = $('.dir').text();
		var dirCell = dir.split('\\');
		if (dir != '\\' && dirCell.length > 2) {
			getDir(root + dir.replace('\\' + dirCell[dirCell.length - 2] + '\\', ''));
		}
	});

	$('#content').on('click', 'dl', function(){
		var path = $(this).data('path'), file = $(this).data('file');

		// 进入下一级目录
		if (path) { 
			getDir(path); 
		}

		// 播放flv文件
		if (file && file.split('.').pop().toLowerCase() == 'flv') {
			var videourl = file.replace(root, www).replace(/\\/g, '/');
			const dp = new DPlayer({
			    container: document.getElementById('dplayer'),
				contextmenu: [{ text: '下载视频', link: videourl }],
			    video: { url: videourl, type: 'flv' },
			});

			layer.open({
				type: 1,
				title: false,
				area: ['720px', '576px'],
				content: $('#dplayer'),
				cancel: function(index, layero) { dp.destroy(); }
			});

			dp.play();
		}
	});
});
</script>
